<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules" :label-col="labelCol" :wrapper-col="wrapperCol">
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="员工姓名" prop="employeeName">
              <a-input v-model="model.employeeName" placeholder="员工姓名" :disabled="true"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="员工编号" prop="employeeNo">
              <a-input v-model="model.employeeNo" placeholder="员工编号" :disabled="true"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="工种名称" prop="workTypeName">
              <a-input v-model="model.workTypeName" placeholder="工种名称" :disabled="true"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="计算日期" prop="calculationDate">
              <a-date-picker 
                v-model="model.calculationDate" 
                style="width: 100%" 
                placeholder="计算日期"
                format="YYYY-MM-DD"
                :disabled="true" />
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="完成数量" prop="completedQuantity">
              <a-input-number 
                v-model="model.completedQuantity" 
                placeholder="完成数量" 
                style="width: 100%"
                :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="基础单价" prop="baseRate">
              <a-input-number 
                v-model="model.baseRate" 
                placeholder="基础单价" 
                style="width: 100%"
                :precision="2"
                :disabled="true" />
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="计件薪资" prop="pieceSalary">
              <a-input-number 
                v-model="model.pieceSalary" 
                placeholder="计件薪资" 
                style="width: 100%"
                :precision="2"
                :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="协作类型" prop="collaborationType">
              <j-dict-select-tag 
                v-model="model.collaborationType" 
                dictCode="collaboration_type" 
                placeholder="协作类型"
                :disabled="true" />
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="备注" prop="remark">
              <a-textarea v-model="model.remark" :rows="3" placeholder="备注" :disabled="true"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
        
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'SalaryDetailModal',
    components: {
    },
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          employeeName: [
            { required: true, message: '请输入员工姓名!' },
          ],
          employeeNo: [
            { required: true, message: '请输入员工编号!' },
          ],
        },
        url: {
          add: "/mes/salaryCalculation/add",
          edit: "/mes/salaryCalculation/edit",
        }
      }
    },
    created () {
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      show (record) {
        this.edit(record);
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.handleCancel();
      },
      handleCancel () {
        this.close();
      },
    }
  }
</script>
